<template>
  <div>
      <Table border :columns="columns" :data="list"  >
        <template #img={row}>
            <div class="c" style="padding:10px">
              <img width="500" height="200" :src="row.img" alt="">
            </div>
        </template>
         <template #action={index}>
          <Button type="primary"   @click="edit(index)"> 修改</Button>
          <Button type="error" @click="del(index)"> 删除</Button>
        </template>
    </Table>
    <Modal v-model="modal" width="530">
        <p slot="header">
          <Icon type="edit"></Icon>
          <span>修改主页商品展示</span>
        </p>
        <div>
            <Form :model="formData" ref='formData' label-position="left" :label-width="100" :rules="ruleInline">
              <FormItem label="排序" prop="order">
                <i-input v-model="formData.order" size="large" ></i-input>
              </FormItem>
              <FormItem label="封面" prop="img">
        <div style="display:inline-block" :key="item.order"  v-for="item in CarouselList">
          <div class="imgchan" :class="formData.img===item.img?'imgclick':''" @click="formData.img=item.img">
            <img width="300" height="100" :src="item.img" alt="" @click="imghand(item)">
          </div>
        </div>
              </FormItem>
            </Form>
        </div>
        <div slot="footer">
            <Button type="primary" size="large"  @click="editAction('formData')">修改</Button>
            <Button size="large"  @click="cancel">取消</Button>
        </div>
    </Modal>
  </div>
</template>

<script>
import store from '@/vuex/store';
import { mapState, mapMutations } from 'vuex';
import Distpicker from 'v-distpicker';
export default {
  name: 'MyAddress',
  data () {
    return {
      columns: [
        {
          title: '排序',
          key: 'order',
          width: 200
        },
        {
          title: '封面',
          slot: 'img'
        },
        {
          title: '操作',
          slot: 'action',
          width: 200
        }
      ],
      haha: [
        'static/img/index/seckill/seckill-item1.jpg',
        'static/img/index/seckill/seckill-item2.jpg',
        'static/img/index/seckill/seckill-item3.jpg',
        'static/img/index/seckill/seckill-item4.jpg',
        'static/img/index/seckill/seckill-item5.jpg'
      ],
      modal: false,
      modal1: false,
      formData: {
        intro: '',
        img: '',
        price: '',
        realPrice: ''
      },
      ruleInline: {
        intro: [
          { required: true, message: '请输入标题', trigger: 'blur' }
        ],
        img: [
          { required: true, message: '请选择封面', trigger: 'blur' }
        ]
      },
      listIndex: 0,
      list: [],
      mxtime: {
        hours: 1,
        minute: 38,
        seconds: 36
      }
    };
  },
  created () {
    this.list = JSON.parse(JSON.stringify(this.CarouselList));
    this.mxtime = JSON.parse(JSON.stringify(this.seckills.deadline));
  },
  computed: {
    ...mapState(['CarouselList', 'seckills'])
  },
  methods: {
    ...mapMutations(['CHAN_BANNER']),
    edit (index) {
      this.modal = true;
      this.listIndex = index;
      this.formData = JSON.parse(JSON.stringify(this.list[index]));
    },
    editAction (name) {
      this.$refs[name].validate(valid => {
        if (valid) {
          this.$Message.success('修改成功');
          this.list[this.listIndex].img = JSON.parse(JSON.stringify(this.formData.img));
          this.list[this.listIndex].order = Number(this.formData.order);
          this.modal = false;
          const arr = this.list.sort(this.listord);
          this.CHAN_BANNER(arr);
        }
      });
    },
    listord (x, y) {
      return x.order - y.order;
    },
    editAction1 (name) {
      this.$Message.success('修改成功');
      this.modal1 = false;
      const arr = [
        this.list,
        this.mxtime
      ];
      this.SET_SECKILLS_INFO(arr);
    },

    cancel () {
      this.modal = false;
    },
    cancel1 () {
      this.modal1 = false;
    },
    del (index) {
      this.$Modal.confirm({
        title: '信息提醒',
        content: '你确定删除这个收货地址',
        onOk: () => {
          this.list.splice(index, 1);
          this.CHAN_BANNER(this.list);
          this.$Message.success('删除成功');
        },
        onCancel: () => {
          this.$Message.info('取消删除');
        }
      });
    },
    imghand (name) {
      this.formData.img = name;
      // this.list[this.listIndex].img = name;
    }
  },
  components: {
    Distpicker
  },
  store
};
</script>

<style scoped>
.address-box {
  padding: 15px;
  margin: 15px;
  border-radius: 5px;
  box-shadow: 0px 0px 5px #ccc;
}
.address-header {
  height: 35px;
  display: flex;
  justify-content: space-between;
  color: #232323;
  font-size: 18px;

}
.address-header img {
height:50px
}
.address-content {
  font-size: 14px;
}
.address-content-title {
  color: #999;
}
.address-action span{
  margin-left: 15px;
  font-size: 14px;
  color: #2d8cf0;
  cursor: pointer;
}
.imgchan{
  display:inline-block;
  padding: 5px;
  margin:5px;
  border:#fff solid 1px
}
.imgclick{
border:red solid 1px
}
.headd{
  margin:20px;
}
</style>
